<template>
	<view>
		<view class="header_box status_bar">
			<view class="message_box">
				<view class="title">— {{commonData.HeadSloganA}}{{commonData.HeadSloganB}}{{commonData.HeadSloganC}}</view>
				<view class="other_box">
					<view class="other iconfont" data-index="0" @tap="setEwm">&#xe601;</view>
					<view class="other iconfont" data-index="1" @tap="setEwm">&#xe882;</view>
					<view class="other iconfont" data-index="2" @tap="setEwm">&#xe8db;</view>
				</view>
			</view>
			<view class="header">
				<view class="logo" data-url="/pages/index/index" @click="gotopage">
					<image :src="IMG_Api+commonData.logo" mode="widthFix"></image>
				</view>
				<view class="more" @tap="autoListPage" v-if="!pupu">
					<image src="../../static/more.png" mode="widthFix"></image>
				</view>
				<view class="more" @tap="autoListPage" v-if="pupu">
					<image src="../../static/close.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<view class="pupu_box" v-if="pupu02" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<image :src="IMG_Api+code.wechat" mode="widthFix" v-if="ewmIndex == 0"></image>
				<image :src="IMG_Api+code.qq_code" mode="widthFix" v-if="ewmIndex == 1"></image>
				<image :src="IMG_Api+code.trill" mode="widthFix" v-if="ewmIndex == 2"></image>
			</view>
		</view>
		<view class="nav_pupu" v-if="pupu">
			<view class="nav_box" :class="pupu == false ? 'nav_index' : ''">
				<!-- <view class="close iconfont" @tap="autoListPage">&#xe69f;</view> -->
				<view class="nav_list">
					<view class="list" data-index="0" :data-url="nav[0].url" @tap="selectMenu">
						<view class="name">{{nav[0].text}}</view>
					</view>

					<view class="list" :class="me == true ? 'menuColor' : ''" data-index="1" @tap="selectMenu">
						<view class="name" :class="me == true ? 'menuColor' : ''">{{nav[1].text}}</view>
						<view class="arrow iconfont" v-if="me == false">&#xe6f3;</view>
						<view class="arrow iconfont menuColor" v-if="me == true">&#xf230;</view>
					</view>

					<view class="me_list" v-if="me == true">
						<block v-for="(item, index) in nav[1].junior">
							<view class="me_t" :data-url="item.url" @click="gotopage">{{item.text}}</view>
						</block>
					</view>

					<view class="list" :class="system == true ? 'menuColor' : ''" data-index="2" @tap="selectMenu">
						<view class="name" :class="system == true ? 'menuColor' : ''">{{nav[2].text}}</view>
						<view class="arrow iconfont" v-if="system == false">&#xe6f3;</view>
						<view class="arrow iconfont menuColor" v-if="system == true">&#xf230;</view>
					</view>


					<view class="system_box" v-if="system">
						<view class="system_auto">
							<view class="system_content" v-for="(item, index) in systemData">
								<view class="title">
									<view class="icon iconfont" :class="item.icon"></view>
									<view class="text">{{item.title}}</view>
								</view>
								<view class="value_box">
									<view class="value" v-for="(item02, index02) in item.value"
										:class="item02.color == true ? 'systemColor01' : ''" :data-index01="index"
										:data-index02="index02" :data-url="'/pages/index/system?id='+item02.id" @tap="setSystemValue">
										<view class="name" :class="item02.color == true ? 'systemColor02' : ''">
											{{item02.name}}
										</view>
										<view class="text" :class="item02.color == true ? 'systemColor02' : ''">
											{{item02.text}}
										</view>
									</view>
								</view>
							</view>


						</view>
					</view>

					<view class="list" data-index="3" :data-url="nav[3].url" @tap="selectMenu">
						<view class="name">{{nav[3].text}}</view>
					</view>

					<view class="list" data-index="4" :data-url="nav[4].url" @tap="selectMenu">
						<view class="name">{{nav[4].text}}</view>
					</view>

					<view class="list" data-index="5" :data-url="nav[5].url" @tap="selectMenu">
						<view class="name">{{nav[5].text}}</view>
					</view>


				</view>
			</view>
		</view>
		<view class="clear_box"></view>

		<view class="banner_box">
			<image :src="IMG_Api+categoryData.image" mode="widthFix"></image>
			<view class="banner_content">
				<view class="english">{{categoryData.english}}</view>
				<view class="title">{{categoryData.name}}</view>
				<view class="text"></view>
			</view>
		</view>



		<view class="page_content">
			<view class="page_title">
				<view class="english">{{text.faq_phrase}}</view>
				<view class="content">
					<view class="title">{{text.faq_questionPhrase}}</view>
					<view class="text">{{text.faq_questionTitle}}</view>
				</view>
			</view>
			
			<view class="question_box">
				<block v-for="(item, index) in text.faq_questionContent">
					<view class="question_list" :data-index="index" @tap="getQuestion">
						<view class="question_title" :class="item.tick == true ? 'questionColor' : ''">
							<view class="title" :class="item.tick == true ? 'questionColor02' : ''">{{item.title}}</view>
							<view class="icon iconfont" v-if="item.tick == true" :class="item.tick == true ? 'questionColor02' : ''">&#xeb42;</view>
							<view class="icon iconfont" v-if="item.tick == false">&#xe707;</view>
						</view>
						<view class="value_box" v-if="item.tick == true">
							<view class="icon">
								<image src="../../static/question.png" mode="widthFix"></image>
							</view>
							<view class="value">{{item.content}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="footer_box">
			<view class="logo" data-url="/pages/index/index" @click="gotopage">
				<image :src="IMG_Api+commonData.logo" mode="widthFix"></image>
			</view>
			<view class="name">{{commonData.company_profile}}</view>
			<view class="phone">{{commonData.hot_lineText}}+{{commonData.contact_number}}</view>
			<view class="nav_list">
				<view class="list" data-index="0" @tap="selectMenu02">
					<view class="name">{{commonData.firm}}</view>
					<view class="arrow iconfont" v-if="me02 == false">&#xe6f3;</view>
					<view class="arrow iconfont" v-if="me02 == true">&#xf230;</view>
				</view>
				<view class="me_list" v-if="me02 == true">
					<block v-for="(item, index) in categoryBottom.bottomFirm" :key="index">
						<view class="me_t" :data-url="item.url" @click="gotopage">{{item.name}}</view>
					</block>
				</view>
				<view class="list" data-index="1" @tap="selectMenu02">
					<view class="name">{{commonData.quickLink}}</view>
					<view class="arrow iconfont" v-if="link == false">&#xe6f3;</view>
					<view class="arrow iconfont" v-if="link == true">&#xf230;</view>
				</view>
				<view class="me_list" v-if="link == true">
					<block v-for="(item, index) in categoryBottom.quickLink" :key="index">
						<view class="me_t" :data-url="item.url" @click="gotopage">{{item.name}}</view>
					</block>
				</view>
				<view class="title">{{commonData.newsletter}}</view>
				<view class="name">{{commonData.describeA}}</view>
				<view class="search_box">
					<view class="search">
						<input type="text" value="" placeholder="请输入联系电话" v-model="bottomPhone" />
					</view>
					<view class="menu iconfont" @tap="phoneSubmitFun">&#xeb08;</view>
				</view>
				<view class="friendship">
					<view class="text">{{commonData.titleWord}}</view>
					<view class="friend">
						<block v-for="(item, index) in commonData.externalLink" :key="index">
							<a class="icon iconfont" :href='item.desc' target="_blank" :class="item.icon"></a>
						</block>
					</view>
				</view>
				<view class="edition">{{commonData.copyright}} {{commonData.corporation}}
					<a style="color:#7A7A7A;" href='https://beian.miit.gov.cn/'
						target="_blank">{{'&nbsp'+commonData.beian}}</a>
				</view>
			</view>
		</view>

		<view class="fenestra" v-if="fenestra">
			<view class="menu iconfont" @tap="goPageTop">&#xf230;</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				fenestra: false,
				pupu: false,
				me: false,
				me02: false,
				link: false,
				system: false,
				navlist: [{
						text: '首页',
						url: '/pages/index/index',
					},
					{
						text: '关于我们',

					},
					{
						text: '产品服务'
					},
					{
						text: '案例展示',
						url: '/pages/case/case',
					},
					{
						text: '新闻资讯',
						url: '/pages/news/news',
					},
					{
						text: '联系我们',
						url: '/pages/telephone/telephone',
					}

				],
				systemData: [{
						icon: 'icon-dianpu',
						title: 'B2C电商系统',
						value: [{
								name: '助农电商系统',
								text: '多种销售模式的电商系统',
								color: true,
								url: '/pages/index/system'
							},
							{
								name: '众筹电商系统',
								text: '基于购物赠送门票或积分众筹电商',
								color: false,
								url: '/pages/index/system'
							},
							{
								name: '艺术教培系统',
								text: '艺术教育行业',
								color: false,
								url: '/pages/index/system'
							}
						]
					},
					{
						icon: 'icon-ERPxitong',
						title: '跨境ERP电商系统',
						value: [{
								name: '网络货运系统',
								text: '运输管理结算系统',
								color: false,
								url: '/pages/index/system'
							},
							{
								name: '抢单拍卖系统',
								text: '通过拍商品卖转售议价',
								color: false,
								url: '/pages/index/system'
							},
						]
					},
					{
						icon: 'icon-cgcrmxitong',
						title: 'CRM客户管理系统',
						value: [{
							name: '抖音订单管理系统',
							text: '通过抖店接口，订单接入系统',
							color: false,
							url: '/pages/index/system'
						}, ]
					},
					{
						icon: 'icon-yidong',
						title: '移动端管理系统',
						value: [{
								name: '垃圾分类回收系统',
								text: '互联网+环保回收+便民超市模式',
								color: false,
								url: '/pages/index/system'
							},

						]
					}
				],
				question: [{
						tick: true,
						title: 'Herb Lubalin 排版的灵感设计决策可以像插图和摄影一样令人兴奋',
						value: '但我必须向你解释，这一切斥乐颂苦的错误思想是如何产生的，我将系统地给你一个完整的说明，阐述真理的伟大探索者、世界的建造者的实际教导。人类的幸福拒绝、不喜欢或避免快乐本身，因为它是快乐，但因为那些不知道如何追求快乐的人'
					},
					{
						tick: false,
						title: 'Herb Lubalin 排版的灵感设计决策可以像插图和摄影一样令人兴奋',
						value: '但我必须向你解释，这一切斥乐颂苦的错误思想是如何产生的，我将系统地给你一个完整的说明，阐述真理的伟大探索者、世界的建造者的实际教导。人类的幸福拒绝、不喜欢或避免快乐本身，因为它是快乐，但因为那些不知道如何追求快乐的人'
					},
					{
						tick: false,
						title: 'Herb Lubalin 排版的灵感设计决策可以像插图和摄影一样令人兴奋',
						value: '但我必须向你解释，这一切斥乐颂苦的错误思想是如何产生的，我将系统地给你一个完整的说明，阐述真理的伟大探索者、世界的建造者的实际教导。人类的幸福拒绝、不喜欢或避免快乐本身，因为它是快乐，但因为那些不知道如何追求快乐的人'
					}
				],
				pupu02: false,
				ewmIndex: 0,
				IMG_Api: '',
				commonData: '',
				code: '',
				nav: [],
				selected: 0,
				systemData: [],
				categoryBottom: [],
				bottomPhone: '',
				text: '',

				otherConfig: '',
				formInfo: '',
				caseStart: '',
				caseCentre: [],
				caseSide: '',
				caseEnd: '',
				chooseusMenu: 0,
				companyTeam: '',
				news: [],
				categoryData: '',
				
			}
		},
		onLoad() {
			let that = this;
			that.loadData();
		},
		onShow() {
			let that = this;
			that.system = false;
			that.me = false;
			that.pupu = false;
			if(this.systemData){
				this.systemData.forEach(item => {
					item.value.forEach(item02 => {
						this.$set(item02, 'color', false);
					});
				});
			}
			
		},
		methods: {
			autoPupu() {
				let that = this;
				that.pupu02 = !that.pupu02;
			},
			setEwm(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.ewmIndex = index;
				that.pupu02 = !that.pupu02;
			},
			loadData() {
			  let that = this;
			  that.Net._get('news/faq',{}, res => {
			    if(res.code == 1){
					uni.setNavigationBarTitle({
					     title: res.data.categoryData.name // 修改为你想要的标题
					   });
					that.commonData = res.data.common;
					that.code = res.data.code;
					that.nav = res.data.category;
					that.selected = res.data.categoryData.check_id;
					that.categoryData = res.data.categoryData;
					that.systemData = res.data.goodsclass;
					that.categoryBottom = res.data.categoryBottom;
					that.text = res.data.text;
					
					that.IMG_Api = this.Cfg.Setting.img;
			    }
			  });
			},
			phoneSubmitFun() {
				let that = this;
				let _data = {
					phone: that.bottomPhone,
					type: '1',
				}
				that.Net._post('news/contentSubmission', _data, res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2800
						})
						setTimeout(function() {
							that.bottomPhone = '';
						}, 1000)
					}
				});
			},
			getQuestion(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.text.faq_questionContent[index].tick = !that.text.faq_questionContent[index].tick;
			},
			goPageTop() {
				let that = this;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			setSystemValue(e) {
				let that = this;
				let index01 = e.currentTarget.dataset.index01;
				let index02 = e.currentTarget.dataset.index02;
				this.systemData.forEach(item => {
					item.value.forEach(item02 => {
						this.$set(item02, 'color', false);
					});
				});
				that.systemData[index01].value[index02].color = true;

				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});

			},
			selectMenu(e) {
				let that = this;
				let number_ = e.currentTarget.dataset.index;

				if (number_ == 1) {
					that.me = !that.me;
				}

				if (number_ == 2) {
					that.system = !that.system;
				}

				if (number_ != 1 || number_ != 2) {
					let url = e.currentTarget.dataset.url;
					uni.navigateTo({
						url: url
					});
				}


			},
			selectMenu02(e) {
				let that = this;
				let number_ = e.currentTarget.dataset.index;

				if (number_ == 0) {
					that.me02 = !that.me02;
				}

				if (number_ == 1) {
					that.link = !that.link;
				}



			},
			autoListPage() {
				let that = this;
				that.pupu = !that.pupu;
			},
			gotopage(e) {
				var that = this;
				let url = e.currentTarget.dataset.url;
				//console.log(e);
				uni.navigateTo({
					url: url
				});
			},
			backPage() {
				uni.navigateBack({});
			}
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 800) {
				this.fenestra = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 800) {
				this.fenestra = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		}
	}
</script>

<style>
	.banner_box {
		width: 100%;
		position: relative;
	}

	.banner_box image {
		width: 100%;
	}

	.banner_box .banner_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 4%;
	}

	.banner_box .banner_content .english {
		font-size: 6vw;
		color: #0179F1;
		margin-top: 16vw;
		font-weight: bold;
	}

	.banner_box .banner_content .title {
		font-size: 7vw;
		color: #fff;
		margin-top: 3vw;
	}

	.banner_box .banner_content .text {
		font-size: 3.2vw;
		color: #fff;
		margin-top: 3vw;
		text-decoration: underline;
	}

	.question_box {
		width: 100%;
		margin-top: 4vw;

	}

	.question_box .question_list {
		width: 100%;
		margin-bottom: 4%;
	}

	.question_list .question_title {
		width: 100%;
		height: 15vw;
		display: flex;
		align-items: center;
		background-color: #ECF0F5;
		padding: 0 4vw;
	}

	.question_list .question_title .title {
		flex: 1;
		font-size: 4vw;
		font-weight: bold;
		color: #333;
	}

	.question_list .question_title .icon {
		font-size: 4vw;
		color: #333;
	}

	.question_list .value_box {
		width: 100%;
		background-color: #F8F8F8;
		padding: 4vw;
		display: flex;
		align-items: center;
	}

	.question_list .value_box .icon {
		width: 12vw;
	}

	.question_list .value_box .icon image {
		width: 100%;
	}

	.question_list .value_box .value {
		flex: 1;
		margin-left: 3vw;
		font-size: 3.5vw;
		color: #696969;
		line-height: 6vw;
	}

	.questionColor {
		background-color: #0076BB !important;
	}

	.questionColor02 {
		color: #fff !important;
	}
</style>